<template>
  <div>
    <div class="custom-market">
      <div class="custom-add">
            <div class='custom-con'>
              <ul>
                <span>品类</span>
                <el-select v-model="customData.parentCategoryId"  placeholder="厨味小电" style="width: 156px;"  @change="customData.categoryId=''">
                  <el-option
                    v-for="item in categoryDatas"
                    :key="item.value"
                    :label="item.categoryName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select v-model="customData.categoryId" placeholder="全部" style="width: 156px">
                  <el-option
                    v-for="item in subCategoryDatas"
                    :key="item.value"
                    :label="item.categoryName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </ul>
              <ul>
                <span>市场名称</span>
                <el-input maxlength=16 v-model="customData.marketName" placeholder="请输入细分市场名称"  style="width: 494px"></el-input>
              </ul>
              <!--<ul>-->
                <!--<span>地理区域</span>-->
                <!--<el-checkbox-group v-model="regionCheckList">-->
                  <!--<el-checkbox v-for="city in regionCheckList1.dictionary" :label="city.entry" :key="city.id">{{city.entry}}</el-checkbox>-->
                <!--</el-checkbox-group>-->
              <!--</ul>-->
              <ul>
                 <span>地理区域</span>
                <el-checkbox-group v-model="checkedCities1">
                  <div v-for="(n,index) in regionCheckList1.dictionary" style="display: flex">
                    <div class="item" style="margin-right:30px">
                      <p style="width:60px;font-size: 14px;">{{n.entry}}</p>
                    </div>
                    <div>
                      <el-checkbox v-for="a,key in returnSubCity(n) " :label="a.entry" :key="key">{{a.entry}}</el-checkbox>
                    </div>

                  </div>
                </el-checkbox-group>
              </ul>

              <ul>
                <span>社会属性</span>
                <el-select v-model="customData.socialType" placeholder="c端" style="width: 160px">
                  <el-option
                    v-for="item in socialOption.dictionary"
                    :key="item.entry"
                    :label="item.entry"
                    :value="item.entry">

                  </el-option>
                </el-select>
                <div class="social-attributes">
                  <li>
                    <div class="block">
                      <span class="demonstration">年龄</span>
                      <el-slider
                        v-model="ageList"
                        range
                        :max="100">
                      </el-slider>
                    </div>
                  </li>
                  <li>
                    <span>收入</span>
                    <el-checkbox-group
                        class="col-xs-9"
                        v-model="incomeCheckList"
                        style="padding: 0"
                    >
                       <el-checkbox
                         v-for="item in incomeCheckList1.dictionary"
                         :label="item.entry"
                         @click.native="checkICBox(item.entry)"
                         :key="item.id">
                         {{item.entry}}
                       </el-checkbox>
                    </el-checkbox-group>
                  </li>
                  <li>
                    <span>性别</span>
                    <el-select v-model="customData.sex" placeholder="全部">
                      <el-option
                        v-for="item in sexOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                  <li>
                    <span style="padding-right: 36px">教育程度</span>
                    <el-checkbox-group v-model="eduCheckList" >
                       <el-checkbox
                         v-for="item in eduCheckList1.dictionary"
                         :label="item.entry"
                         @click.native="checkEDBox(item.entry)"
                         :key="item.id">
                         {{item.entry}}
                       </el-checkbox>
                    </el-checkbox-group>
                  </li>
                </div>
              </ul>
              <ul class="buy-act">
                <p>影响购买的行为</p>
                <div  class='clearfix' style="padding: 0">
                  <li  style="padding: 0">
                    <span >使用量</span>
                    <el-select v-model="customData.useCycle" placeholder="1-50" >
                      <el-option
                        v-for="item in useCycleOption.dictionary"
                        :key="item.entry"
                        :label="item.entry"
                        :value="item.entry">
                      </el-option>
                    </el-select>
                  </li>
                  <li style="padding:0;">
                    <span>费用支出</span>
                    <el-input maxlength=11 v-model="customData.cost"  style="width: 200px"></el-input>
                  </li>
                  <li  style="padding: 0">
                    <span >购买渠道</span>
                    <el-select v-model="customData.channelType" placeholder="购买渠道" >
                      <el-option
                        v-for="item in channelOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </li>
                </div>
                <div>
                  <li>
                    <span>应用场景</span>
                    <el-select v-model="customData.applicationScenarios" placeholder="1-50" >
                      <el-option
                        v-for="item in ScenariosOption.dictionary"
                        :key="item.entry"
                        :label="item.entry"
                        :value="item.entry">
                      </el-option>
                    </el-select>
                  </li>
                </div>
              </ul>
              <ul>
                <p>获取销售利润潜力</p>
                <div  class='clearfix' style="padding: 0">
                  <li  style="padding: 0" >
                    <span >使用量</span>
                    <el-select v-model="customData.profitUseCycle" placeholder="1-50" >
                      <el-option
                        v-for="item in profitUseCycleOption.dictionary"
                        :key="item.entry"
                        :label="item.entry"
                        :value="item.entry">
                      </el-option>
                    </el-select>
                  </li>
                  <li style="padding:0;">
                    <span>购买频率</span>
                    <el-select @change='changeSelect()' v-model="customData.frequency" placeholder="请选择"  style="width: 30%;margin-right: 20px">
                      <el-option
                        v-for="item in frequencyOptionDictionary"
                        :key="item.entry"
                        :label="item.entry"
                        :value="item.entry">
                      </el-option>
                    </el-select>
                    <el-select v-model="customData.purchaseCount"   style="width: 30%;">
                      <el-option
                        v-for="item in purchaseCountOptionComputer"
                        :key="item.entry"
                        :label="item.entry"
                        :value="item.entry">
                      </el-option>
                    </el-select>
                  </li>
                </div>
              </ul>
              <!-- <ul style="display: flex">
                <p style="margin-right: 48px;line-height: 40px">其他</p>
                <el-input v-model="value2" placeholder="重雾霾地区" style="width:220px;margin-right: 20px;"></el-input>
                <el-input v-model="value2" placeholder="高污染/高耗能/高投入企业" style="width:220px;"></el-input>
              </ul> -->
              <div class="custom-but">
                <button class="ok" @click="addMarket">确定</button>
                <button class="cancel" @click="$emit('close',false)">取消</button>
              </div>
            </div>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  props: {
    parentId: {
      default: null
    },
    marketNames: {
      default: ""
    },
    marketBases: {
      default: ""
    }
  },
  data() {
    return {
      channelOption: [
        {
          value: "线上",
          label: "线上"
        },
        {
          value: "线下",
          label: "线下"
        }
      ], //购买渠道数据
      sexOption: [
        {
          value: "无",
          label: "全部"
        },
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }
      ], //性别数组
      socialOption: [], //社会属性数组
      useCycleOption: [],
      ScenariosOption: [],
      profitUseCycleOption: [],
      frequencyOption: [],
      purchaseCountOption: [],
      value: "",
      checkList: [],
      eduCheckList: [], //教育数组
      eduCheckList1: [], //教育数组
      incomeCheckList: [], //收入数组
      incomeCheckList1: [], //收入数组
      regionCheckList: [], //地区数组
      regionCheckList1: [], //地区数组
      checkedCities1: [],
      ageList: [0, 0], //年龄
      activeNames: ["custom"],
      value1: ["1"],
      value2: "",
      marketId: "",
      listName: "",
      categoryData: "", //品类数组
      customData: {
        id: "",
        marketName: "",
        marketType: "",
        category: "",
        subCategory: "",
        categoryId: "",
        parentCategoryId: "",
        region: "",
        socialType: "",
        age: "",
        income: "",
        sex: "",
        education: "",
        useCycle: "",
        cost: "",
        channelType: "",
        applicationScenarios: "",
        profitUseCycle: "",
        frequency: "年",
        purchaseCount: "",
        optLock: "",
        mark: "",
        creator: ""
      }
    };
  },
  computed: {
    //获取自定义细分市场商品品类
    categoryDatas() {
      return this.categoryData.category;
    },
    subCategoryDatas() {
      let { subCategory } = this.categoryData;
      let { parentCategoryId } = this.customData;
      console.log(subCategory);
      if (subCategory == undefined) return;
      for (var i in subCategory) {
        if (parentCategoryId == i.split("_")[1]) {
          return subCategory[i];
        }
      }
    },
    frequencyOptionDictionary() {
      return this.frequencyOption.dictionary;
    },
    purchaseCountOptionComputer() {
      let subDictionary = this.frequencyOption.subDictionary;
      let frequency = this.customData.frequency;
      let dictionary = this.frequencyOption.dictionary;
      console.log("----------------------");
      console.log(this.frequencyOption, frequency);
      let id;
      for (let i in dictionary) {
        if (frequency == dictionary[i].entry) {
          id = dictionary[i].id;
        }
      }
      if (!id) {
        return [];
      }
      if (frequency === "") {
        return [];
      }
      return subDictionary[`id_${id}`];
    }
  },
  created() {},
  mounted() {
    console.log(this.marketNames, this.parentId, this.marketBases);
    this.getCategory(() => {
      if (this.parentId != null) {
        this.obtainMaket1();
      } else {
        console.log(this.marketNames, this.marketBases);
        if (this.marketNames && this.marketBases) {
          this.customData.marketName = this.marketNames;
        }
      }
    });

    let arr = [
      {
        value: "市场罗盘_地理区域"
      },
      {
        value: "市场罗盘_社会属性"
      },
      {
        value: "市场罗盘_收入"
      },
      {
        value: "市场罗盘_教育程度"
      },
      {
        value: "市场罗盘_行为使用量"
      },
      {
        value: "市场罗盘_应用场景"
      },
      {
        value: "市场罗盘_潜力使用量"
      },
      {
        value: "市场罗盘_潜力购买频率"
      }
    ];
    let arr1 = [
      "regionCheckList1",
      "socialOption",
      "incomeCheckList1",
      "eduCheckList1",
      "useCycleOption",
      "ScenariosOption",
      "profitUseCycleOption",
      "frequencyOption",
      " purchaseCountOption"
    ];
    for (let i in arr) {
      this.getDictionary(arr[i].value, res => {
        this[arr1[i]] = res;
        console.log(this[arr1[i]]);
      });
    }
  },
  methods: {
    changeSelect(){
      this.customData.purchaseCount=''
    },
    //折叠面板
    handleChange(val) {
      console.log(val);
      console.log(this.regionCheckList);
    },
    checkICBox(e) {
       console.log(e);
      // this.incomeCheckList = [e];
      // console.log(this.incomeCheckList);
    },
    checkEDBox(e) {
     // this.eduCheckList = [e];
    },
    //获取二级城市
    returnSubCity(n) {
      return this.regionCheckList1.subDictionary[`id_${n.id}`];
    },
    //获取一级区域
    getArea(val) {
      console.log(val);
      let obj = {}; //选中城市所对应区域
      let arr = [];
      let cityC = this.regionCheckList1;
      console.log(cityC);
      for (let i in cityC.subDictionary) {
        let child = cityC.subDictionary[i]; //二级城市,i对象得key，此时child为数组
        for (let a in child) {
          let name = child[a].entry; //某个区域下得二级城市
          for (let b in val) {
            if (val[b] === name) {
              //val为选中得二级城市
              let subId = i.split("_")[1]; //选中城市对应得一级区域ID
              for (let c in cityC.dictionary) {
                //通过subId
                if (cityC.dictionary[c].id == subId) {
                  obj[cityC.dictionary[c].entry] = ""; //obj={'华南':''}
                }
              }
            }
          }
        }
      }
      for (var i in obj) {
        arr.push(i);
      }

      return arr.join(",");
    },
    //获取编辑时单个每个细分市场的market值
    obtainMaket1() {
      (this.marketId = this.$route.query.id), console.log(this.marketId);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOneMarketTrends", //getMarketTrends
          query: {
            id: this.parentId
            // "pageNo":1,
            // "pageSize":1
          }
        })
        .then(res => {
          this.customData = res.data.data;
          console.log(this.customData);
          //教育程度
          let eduArr=this.customData.education.split(",");
          this.eduCheckList=eduArr
          //收入
          let incomeArr = this.customData.income.split(",");
          this.incomeCheckList=incomeArr
          //城市
          let strprovinceArr = this.customData.province.split(",");
          this.checkedCities1 = strprovinceArr;
          //年龄
          let ageValue = this.customData.age;
          let ageArr = ageValue.split("-");
          this.ageList = ageArr;
          //
        })
        .catch(error => {});
    },
    //获取品类数据
    getCategory(callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getCategory",
          query: {}
        })
        .then(res => {
          this.categoryData = res.data.data;
          this.$nextTick(() => {
            callback();
          });
        })
        .catch(error => {});
    },
    //获取数据字典
    getDictionary(cnName, callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getDictionary",
          query: { cnName: cnName }
        })
        .then(res => {
          if (res.data.data.dictionary == undefined) return;
          console.log(res.data.data);
          callback(res.data.data);
        })
        .catch(error => {});
    },
    //添加修改市场接口
    addMarket() {
      //新添加自定义市场
      if (this.parentId == null) {
        console.log("新添加");
        //添加市场
        let ageString = this.ageList[0] + "-" + this.ageList[1];
        let e = this.checkedCities1;
        let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
        if (!this.customData.parentCategoryId || !this.customData.categoryId) {
          this.$message({
            message: "请选择品类",
            type: "warning"
          });
          return;
        }else if (this.customData.cost && !reg.test(this.customData.cost)) {
          this.$message({
            message: "费用支出请输入正数",
            type: "warning"
          });
          return;
        } else {
          //这里要做判断，是推荐市场还是自定义市场。
          this.$http
            .post(this.GLOBAL.host, {
              method: "addMarketTrends",
              data: {
                marketName: this.customData.marketName,
                marketType: "自定义",
                categoryId: this.customData.categoryId,
                region: this.getArea(e),
                province: this.checkedCities1.join(","),
                socialType: this.customData.socialType,
                age: ageString,
                income: this.incomeCheckList.join(","),
                sex: this.customData.sex,
                education: this.eduCheckList.join(","),
                useCycle: this.customData.useCycle,
                cost: this.customData.cost,
                channelType: this.customData.channelType,
                applicationScenarios: this.customData.applicationScenarios,
                profitUseCycle: this.customData.profitUseCycle,
                frequency: this.customData.frequency,
                purchaseCount: this.customData.purchaseCount,
                creator:this.$store.state.user.id,
              }
            })
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "添加市场成功",
                  type: "success"
                });
                this.$emit("close");
                //刷新首页
                this.getData();
              }else {
                this.$message({
                  message: '添加失败',
                  type: 'error'
                });
              }
            })
            .catch(error => {});
        }
      } else if (this.parentId != null) {
        console.log("修改添加");
        //修改市场
        let ageString = this.ageList[0] + "-" + this.ageList[1];
        let e = this.checkedCities1;
        let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
        if (!this.customData.parentCategoryId || !this.customData.categoryId) {
          this.$message({
            message: "请选择品类",
            type: "warning"
          });
          return;
        } else if (this.customData.cost && !reg.test(this.customData.cost)) {
          this.$message({
            message: "费用支出请输入正数",
            type: "warning"
          });
          return;
        } else {
          console.log(789);
          this.$http
            .post(this.GLOBAL.host, {
              method: "updateMarketTrends",
              data: {
                marketName: this.customData.marketName,
                marketType: this.customData.marketType,
                categoryId: this.customData.categoryId,
                region: this.getArea(e),
                province: this.checkedCities1.join(","),
                socialType: this.customData.socialType,
                age: ageString,
                income: this.incomeCheckList.join(","),
                sex: this.customData.sex,
                education: this.eduCheckList.join(","),
                useCycle: this.customData.useCycle,
                cost: this.customData.cost,
                channelType: this.customData.channelType,
                applicationScenarios: this.customData.applicationScenarios,
                profitUseCycle: this.customData.profitUseCycle,
                frequency: this.customData.frequency,
                purchaseCount: this.customData.purchaseCount,
                id: this.parentId,

              }
            })
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                this.$emit("close");
                //刷新首页
                this.getData();
              }else {
                this.$message({
                  message: '修改失败',
                  type: 'error'
                });
              }
            })
            .catch(error => {});
        }
      }
    },
    // 市场机会
    getData() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketTrends",
          query: {
            categoryId: this.cateValue == 0 ? "" : this.cateValue,
            marketType: this.allCateValue == "全部" ? "" : this.allCateValue,
            marketName: this.conValue,
            pageNo: this.page,
            pageSize: 10,
            creator:this.$store.state.user.id,
          }
        })
        .then(res => {
          console.log(1);
          let marketData = res.data.data.list;

          console.log(2);
          this.datas = marketData;
          this.totalPage = res.data.data.total;
        })
        .catch(error => {});
    }
  },
  watch: {
    checkedCities1(e) {
      console.log(e);
      this.getArea(e);
    },
    incomeCheckList(e) {
      console.log(e);
      return e
    },
    eduCheckList(e){
      return e
    }
  }
  //   computed:{
  //     purchaseCountOptionComputer(){
  //      let all= this.frequencyOption
  //     let frequency=this.customData.frequency
  // console.log(all,frequency)

  //       return
  //     }
  //   }
};
</script>
<style lang="less" scoped>
.custom-market {
  width: 100%;
  height: 100%;
  list-style: none !important;

  .el-collapse-item__header {
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
  }
  > .custom-add {
    width: 97.65%;
    margin: auto;
    height: auto;
    background: #fff;
    margin-top: 20px;
    .el-collapse-item__content {
      background: red;
    }
    .custom-con {
      padding-left: 15px;
      padding-top: 20px;
      > ul {
        padding-left: 0;
        margin-bottom: 20px;
      }
      > ul:nth-child(1) {
        > span {
          font-size: 14px;
          color: #686868;
          margin-right: 49px;
          color: #323232;
        }
      }
      > ul:nth-child(2) {
        > span {
          font-size: 14px;
          color: #686868;
          margin-right: 20px;
          color: #323232;
        }
      }
      > ul:nth-child(3) {
        display: flex;
        > span {
          font-size: 14px;
          color: #686868;
          margin-right: 24px;
          color: #323232;
        }
      }
      > ul:nth-child(4) {
        > span {
          font-size: 14px;
          color: #686868;
          margin-right: 20px;
          color: #323232;
        }
      }
      > ul:nth-child(5) {
        font-size: 14px;
        overflow: auto;
        > p {
          font-size: 16px;
        }
        > div:nth-child(2) {
          margin-top: 20px;
          display: flex;
          justify-content: space-around;
          li {
            width: 33.33%;
            list-style: none;
            span {
              margin-right: 30px;
            }
          }
        }
        > div:nth-child(3) {
          margin-top: 20px;
          li {
            float: left;
            width: 33.33%;
            list-style: none;
            span {
              margin-right: 16px;
            }
          }
        }
      }
      > ul:nth-child(6) {
        font-size: 14px;
        overflow: auto;
        width: 100%;
        > p {
          font-size: 16px;
        }
        > div:nth-child(2) {
          margin-top: 20px;
          display: flex;
          justify-content: start;
          > li:nth-child(1) {
            width: 33.33%;
            list-style: none;
            span {
              margin-right: 30px;
            }
          }
          > li:nth-child(2) {
            width: 33.33%;
            list-style: none;
            span {
              margin-right: 30px;
            }
          }
        }
      }
    }
    .custom-but {
      display: flex;
      justify-content: center;
      margin-top: 45px;
      padding-bottom: 20px;
      > button.cancel {
        width: 160px;
        height: 60px;
        background: #fff;
        border: 1px solid #3aaaec;
        color: #3aaaec;
        font-size: 16px;

        border-radius: 6px;
      }
      > button.ok {
        width: 160px;
        height: 60px;
        background: #3aaaec;
        color: #fff;
        border: none;
        font-size: 16px;
        margin-right: 68px;
        border-radius: 6px;
      }
    }
  }
  .social-attributes {
    width: 91.8%;
    height: 210px;
    margin: auto;
    margin-top: 10px;
    margin-left: 80px;
    border: 1px solid #cacaca;

    > li {
      display: flex;
      width: 100%;
      align-items: center;
      span {
        padding-left: 24px;
        padding-right: 60px;
        line-height: 52px;
      }
    }
    .block {
      display: flex;
      width: 100%;
      > .el-slider {
        width: 49.15%;
      }
    }
    .el-input {
      width: 8.4%;
    }
  }
}
</style>
<style lang="less" >
.custom-market {
  .el-slider__runway {
    background: -webkit-linear-gradient(left, #9a96e6, #78bff1) !important;
  }
}
</style>
